<template>
	<view class="navTabBox">
		<view class="longTab flex">
			<scroll-view class="nav" scroll-x="true" style="height: 90rpx;width:750rpx;white-space: nowrap; display: flex" scroll-with-animation :scroll-left="tabLeft">
				<view class="text-df cu-item flex-sub padding-lr" :data-index="index" :class="index===tabClick?'text-white cur':''" v-for="(item,index) in tabTitle" :key="index" :id="'id'+index" @click="longClick(index)">
					{{item.name}}
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'navTab',
		props: {
			tabTitle: {
				type: Array,
				default: []
			},
		},
		data() {
			return {
				tabClick: 0, //导航栏被点击
				screenWidth: 0, //每个导航栏占位
				tabLeft:0,
			};
		},
		created() {
			var that = this
			// 获取设备宽度
			uni.getSystemInfo({
				success(e) {
					that.screenWidth = e.screenWidth
				}
			})
		},
		methods: {
			// 导航栏点击
			longClick(index){
				if(index>3){
					this.tabLeft = Math.floor(index/4)* this.screenWidth //设置下划线位置
				}else{
					this.tabLeft=0
				}
				this.tabClick = index //设置导航点击了哪一个
				this.$emit('changeTab', index);//设置swiper的第几页
			},
		}
	}
</script>

<style lang="scss">
	.navTabBox {
		width: 100vw;
		color: rgba(255, 255, 255, 0.50);
		.click {
			color: white;
		}
		.longTab {
			width: 100%;
			.longItem{ 
				height: 80upx; 
				font-size:32upx;
				display: inline-block;
				line-height: 80upx;
				text-align: center;
			}
			.underlineBox {
				height: 3px;
				width: 20%;
				display: flex;
				align-content: center;
				justify-content: center;
				transition: .2s;
				.underline {
					width: 84upx;
					height: 4px;
					background-color: white;
				}
			}
		}
	}
</style>
